<template>
	<div class=" template-box">
		<div class="table" v-if="">
			<div class="school-chose">
				<span :class="{'active':schoolActive}" @click="infoChose('red')">
					<img v-if="redStart[0]" width="30" :src="redStart[0].teamIcon||initImg" alt="" />
					{{teamName.red||'主场'}}
				</span>
				<span :class="{'active':!schoolActive}" @click="infoChose('blue')">
					<img v-if="blueStart[0]" width="30" :src="blueStart[0].teamIcon||initImg" alt="" />
					{{teamName.blue||'客场'}}
				</span>
			</div>
			<div class="shoufa"> 首发阵容(<span>{{startLength}}</span>) <span	:class="{'el-icon-arrow-down':!shoufa,'el-icon-arrow-right':shoufa}" @click="shoufa=!shoufa"></span></div>
			
			<table border="1" cellspacing="0" cellpadding="0" :style="{'height':shoufa?(startLength*50)+'px':'250px','min-height':'300px'}">
				
	
				<tr v-for="item in info.tableData">
					<td ><span  :class="schoolActive?'red-cloth':'blue-cloth'">{{item.cloth}}</span></td>
					<td >
						<img width="30" class="radius50" :src="item.playerIcon||initImg"/>	
					</td>
					<td>
						{{item.studentName}}
					</td>
					<td >{{item.position}}</td>
				</tr>
			</table>
			<div class="shoufa "> 替补阵容(<span>{{alterLength}}</span>) <span :class="{'el-icon-arrow-down':!tibu,'el-icon-arrow-right':tibu}" @click="tibu=!tibu"></span>	</div>
			<table class="sub" border="1" cellspacing="0" cellpadding="0" :style="{'height':tibu?(alterLength*50)+'px':'100px'}">
				
	
				<tr v-for="item in info.alter">
					<td >
						<span :class="schoolActive?'red-cloth':'blue-cloth'">{{item.cloth}}</span>
						
					</td>
					<td>
						<img width="30" class="radius50" :src="item.playerIcon||initImg"/>
						
					</td>
					<td>
						{{item.studentName}}  
					</td>
					
					<td >{{item.position}}</td>
				</tr>
			</table>
		</div>
		<div class="position-data">
			<div  translate="90" class="trans90">
				<img width="500" src="../assets/qiuchang.png" alt="一个图片背景" title="球场"/>
			</div>
			<div class="player-position-box">
				<div v-for=" L in 7" class="player-position-list">
					<div  v-for="T in 5" class="player-position-item" :class="{'positon-red-cloth':schoolActive&&isHas(realPostion,(L-1)*5+T-6),'positon-blue-cloth':!schoolActive&&isHas(realPostion,(L-1)*5+T-6)}" >
						<span v-if="isHas(realPostion,(L-1)*5+T-6)">{{info.tableData.filter(item=>item.realPostion==(L-1)*5+T-6)[0].cloth}}</span>
						<span v-else>  &nbsp; </span>
				</div>
			</div>

		</div>
	</div>

		
	</div>
  
</template>

<script>
	
  export default {
  	name:'starLine',
  	props:['redStart','redSub','blueStart','blueSub','teamName'],
    data() {
      return {
      	shoufa:false,
      	tibu:false,
      	schoolActive:true,
        red:{
	      	alter:this.redSub,
	        tableData: this.redStart
	     },
	    blue:{
	      	alter:this.blueSub,
	        tableData:this.blueStart
	     },
      	info:'' ,
      	realPostion:[]
      }
    },
    computed:{
    	startLength:function(){
    		return this.info.tableData?this.info.tableData.length:0
    	},
    	alterLength:function(){
    		return this.info.alter?this.info.alter.length:0
    	}
    },
    mounted:function(){
    	this.info=this.red;
    	this.setRealPostion()
    
    	
    },
    updated(){
    	
    },
    methods:{
    	moreplayer:function(){
    		
    	},
    	infoChose:function(a){
    		this.info= a=='red'?this.red:this.blue;
    		if (a=='red'){this.schoolActive=true}else{this.schoolActive=false}
    	},
    	isHas:function(arr,num){return arr.indexOf(num)>=0 },
    	setRealPostion:function(){
    		for( let item in this.info.tableData){
    			
    			if(this.info.tableData[item].realPostion){this.realPostion.push(this.info.tableData[item].realPostion)}
    	}}
    	
    	
    }
  }
</script>

<style scoped="scoped">
	.trans90{
		position: relative;
		top: 72px;
		transform: rotateZ(90deg);
		
	}
	.radius50{
		border-radius: 50%;
	}
	
	.template-box{
		position: relative;
		background-color: #F2F2F2;
		width: 100%;
		height: auto;
	}
	.el-icon-arrow-down,.el-icon-arrow-right{
		float: right;
		margin-top: 5px;
		margin-right: 30px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	table,tr,th,td{
		padding: 0px;
		margin: 0px;
		border: none;
		outline: none;
		vertical-align: middle;
		text-align: center;
	}
	img{
		vertical-align: middle;
	}
	.school-chose{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20px;
	
	}
	.school-chose>span{
		width: 45%;
		line-height: 55px;
		border-radius: 5px;
		background-color:white;
		text-align: center;
	}
	.school-chose>span.active{
		
		background-color:#77C1C4;
		color: white;
	}
	.school-chose>span>img{
		border-radius: 50%;
	}
	.table{
		display: inline-block;
		box-sizing: border-box;
		width:50%;
		padding: 20px;
		font-size: 14px;
		background-color: #F9F9F9;
		
	}
	table{
		display: block;
		width: 100%;

		box-sizing: border-box;
		overflow-y: scroll;
		border: 1px solid #DCDCDC; 
		
	}
	/*滚动条盒子*/
	table::-webkit-scrollbar{
		
		width: 6px;
	}
	/*滚动条外层轨道*/
	table::-webkit-scrollbar-track{
		background-color: #dcdcdc;
		border-radius:5px ;
	}
	/*按钮*/
	table::-webkit-scrollbar-button{
		width: 0px;
		height: 0px;
	}
	/*滚动条 内层滑块*/
	table::-webkit-scrollbar-thumb{
		border-radius: 5px;
		background-color: #77C1C4;
	}

	tr:nth-of-type(2n){
		background-color: #f7f7f7;
	}
	tr:nth-of-type(2n+1){
		background-color: white;
	}
	.shoufa{
		box-sizing: border-box;
		width: 100%;
		height: 30px;
		margin-top: 10px;
		padding-left: 10px;
		line-height: 30px;
		text-align: left;
		font-weight: 550;
		font-size: 15px;
		background-color: #E4e4e4;
	}
	.sub{
		min-height: 80px;
	}
	td{
		width: 60px;
		height: 50px;
		line-height: 50px;
	}
	td:first-of-type{
		width:20%;
		
	}
	td:nth-of-type(2)>img{
		margin-left:-30px;
		margin-right:-30px ;
	}
	td:nth-of-type(3){
		width: 220px;
		text-align: left;
	}
	td:last-of-type{
		width: 100px;
		text-align: left;
	}
	.position-data{
		float: right;
		position: relative;
		width: 50%;
		height: 100%;
		box-sizing: border-box;
		
	}
	.position-data>span{
		position: absolute;
		z-index: 1000;
	}

	.red-cloth,.blue-cloth{
		display: inline-block;
		margin-top: 5px;
		width:40px ;
		height: 40px;
		background-size:0 ;
		color: white;
		text-align: center;
		
	}
	.red-cloth{
		background: url(../assets/u3670.png) 0px 10px no-repeat;	
		background-size:90%;	
	}
	.blue-cloth{		
		background: url(../assets/u3757.png) 0px 10px no-repeat;	
		background-size:90%;	
		
	}
	
	.position-data>.red-cloth,.position-data>.blue-cloth{
		padding-top:5px ;
		background-position: 2px -5px;
		background-size: 90%;
	}
	/*首发阵容 队员展位*/
	.player-position-box{
		display: flex;
		flex-direction: column;
		margin-top:-284px ;
		color:white;
	}
	.player-position-list{
		display: flex;
		justify-content: center;
		width: 100%;	
	}
	.player-position-item{
		width: 60px;
		line-height:70px ;
		text-align: center;
		
	}
	.positon-red-cloth{
		background: url(../assets/u3670.png) 11px 14px no-repeat;	
		background-size:65%;	
	}
	.positon-blue-cloth{
		background: url(../assets/u3757.png) 11px 14px no-repeat;	
		background-size:65%;	
	}
	
</style>